@font-face {
  font-family: 'spenumber';
  src: url('./fonts//number.ttf');
  src: url('./fonts/number.woff2') format('woff2'),
    url('./fonts/number.woff') format('woff'),
    url('./fonts/number.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
}

.bgbase {
  margin: 50px auto;
  height: 150px;
  width: 640px;
  border-radius: 1em;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bg {
  .bgbase();
  background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
}

.bg2 {
  .bgbase();
  background: linear-gradient(-90deg, #f7f7f7 0%, #e7e7e7 100%);
}

.progressCircle {
  color: #fff;
  width: 250px;

  svg {
    width: 80px;
    height: 80px;
  }

  .progress-vol {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 40px;
    font-family: spenumber;
  }
}

.twinCircle {
  .progressCircle();

  .c2 {
    stroke: rgba(255, 255, 255);
    fill: transparent;
    transform-origin: center center;
    transform: rotate(-90deg);
  }

  .c1 {
    stroke: rgba(255, 255, 255, 0.3);
    fill: transparent;
  }
}

.pathCircle {
  .progressCircle();

  .c1 {
    stroke: rgba(255, 255, 255, 0.3);
    fill: transparent;
  }

  .c2 {
    stroke: rgba(255, 255, 255);
    fill: transparent;
  }
}

.polyline {
  color: #000;
  width: 250px;

  svg {
    width: 250px;
    height: 80px;
    stroke-width: 2;
    fill: transparent;
    stroke: #000;
  }
}

.polyline-default {
  .polyline();
}

.polyline-linear {
  .polyline();

  #polyline-linear {
    stroke-width: 2;
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.8);
  }
}
